<template>
    <div>
        <div class="personnel-container">
            <el-tabs :tab-position="tabPosition"  style="height: 100%; width: 100%;" @tab-click="handleClick">
                <el-tab-pane label="研发部">
                    <research></research>
                </el-tab-pane>
                <el-tab-pane label="人事部">
                    <reshibu></reshibu>
                </el-tab-pane>
                <el-tab-pane label="财务部">
                    <money></money>
                </el-tab-pane>
                <el-tab-pane label="采购部">
                    <purchase></purchase>
                </el-tab-pane>
                <el-tab-pane label="销售部">
                    <market></market>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import research from '../../components/research.vue';
import reshibu from '../../components/ministry.vue';
import money from '../../components/money.vue';
import market from '../../components/market.vue';
import purchase from '../../components/purchase.vue';

export default {
    components: {
        research,
        reshibu,
        money,
        market,
        purchase
    },
    data() {
        return {
            tabPosition: 'left',
        }
    },
    methods: {
        handleClick() {
            console.log(1);
        },
        
    },
    
}
</script>

<style>
.filter-tree {
    width: 30%;
    height: 800px;
    background-color: rgba(245, 245, 245, 0.642);
}

</style>